<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- 引入 Bootstrap.css -->
    <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
    <title>bootstrap模板</title>
</head>
<body>
    <!-- 普通css -->
    <h1>这是一个大标题</h1>
    <!-- 表格 -->
    <table class="table table-hover table-bordered">
        <tr class="danger">
            <td>序号</td>
            <td>期数</td>
            <td>教室</td>
            <td>老师</td>
            <td>备注</td>
        </tr>
        <tr class="warning">
            <td>1</td>
            <td>89</td>
            <td>322</td>
            <td>张毛</td>
            <td>无</td>
        </tr>
        <tr class="success">
            <td>2</td>
            <td>90</td>
            <td>233</td>
            <td>不指导</td>
            <td>有</td>
        </tr>
        <tr>
            <td>3</td>
            <td>91</td>
            <td>332</td>
            <td>刘志斌</td>
            <td>无</td>
        </tr>
    </table>
    <!-- 下拉框 -->
    <!-- 1.容器class="dropdown" 2.触发器data-toggle="dropdown" 3.下拉框class="dropdown-menu" -->
    <div class="dropdown">
        <button class="btn dropdown-toggle" data-toggle="dropdown">培训课程<span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li class="dropdown-header">
                前端H5
            </li>
            <li class="divider"></li>
            <li>
                <a href="">Java大数据</a>
            </li>
            <li>
                <a href="">UI</a>
            </li>
        </ul>
    </div>
</body>
<script src="./bootstrap-3.4.1-dist/js/jquery-3.5.1.js"></script>
<script src="./bootstrap-3.4.1-dist/js/bootstrap.js"></script>
</html>